<template>
	<view class="wei_container">

		<view class=" padding-lr ">
			<view @tap="showAdd = true" v-show="!showAdd"
				class=" radius padding-tb shadow-warp bg-white margin-top flex justify-center align-center text-xl text-bold">
				<text class="cuIcon-add"></text>
			</view>
			<view class="wei_textarea bg-white" v-show="showAdd">
				<view class="cu-form-group margin-top">
					<textarea maxlength="-1" v-model="notes_content_add" placeholder="请输入备忘内容"></textarea>
				</view>
				<view class="flex justify-center padding-bottom">
					<button @tap.stop="showAdd = false" class="cu-btn lg cuIcon fixed-button-my margin-right-sm">
						<text class="cuIcon-close text-bold"></text>
					</button>
					<button @tap.stop="sbumitBefore" class="cu-btn lg cuIcon margin-left-sm fixed-button-my">
						<text class="cuIcon-check text-bold"></text>
					</button>
				</view>
			</view>

			<view @tap="showEdit(item,index)" v-for="(item,index) in list" :key="index" class="  radius shadow-warp bg-white margin-top"
				:class="showItemEdit&&curentIndex==index?'':'padding-xl'">
				<view >
					<view class="" v-show="!showItemEdit||curentIndex!=index">
						{{item.notes_content}}
					</view>

				</view>
				<view class="wei_textarea" v-show="showItemEdit&&curentIndex==index">
					<!-- <textarea  class="" maxlength="-1"   v-model="indexEditContent.notes_content"></textarea> -->
					<view class="cu-form-group margin-top">
						<textarea maxlength="-1" v-model="indexEditContent.notes_content"></textarea>
					</view>
					<view class="flex justify-center padding">
					
						<button @tap.stop="showItemEdit = false,indexEditContent={}"
							class="cu-btn lg cuIcon fixed-button-my margin-right-sm">
							<text class="cuIcon-close text-bold"></text>
						</button>
						<button @tap.stop="isShowDeleteNote(item,index)"
							class="cu-btn lg cuIcon fixed-button-my margin-right-sm">
							<text class="cuIcon-delete text-bold"></text>
						</button>
						<button @tap.stop="editSubmit(indexEditContent)"
							class="cu-btn lg cuIcon  fixed-button-my">
							<text class="cuIcon-check text-bold"></text>
						</button>
					</view>
				</view>
			</view>
			<!-- <view class="padding-xl radius shadow bg-blue margin-top">根据背景颜色而改变的阴影</view>
			<view class="padding-xl radius shadow shadow-lg bg-white margin-top">长阴影</view>
			<view class="padding-xl radius shadow shadow-lg bg-blue margin-top">长阴影</view>
			<view class="padding-xl radius shadow-warp bg-white margin-top">翘边阴影</view>
			<view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
				<view>根据背景图而改变的阴影</view>
			</view> -->
		</view>



	</view>
</template>

<script>
	import {
		InsertNotes,
		update_notes_by_pk,
		delete_notes_by_pk
	} from "@/common/api.js"
	import {checkAndRequestSubscribeMessage} from "@/common/utils.js"
	export default {
		created() {
			this.userInfo = getApp().globalData.userInfo
		},
		props: {
			list: {
				type: Array,
				default () {
					return [];
				},
			},
		},
		data() {
			return {
				curentIndex: 0,
				showItemEdit: false,
				indexEditContent: {},
				userInfo: null,
				showAdd: false,
				notes_content_add: '',
				modalName: 'gridModal',
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		methods: {
			// 删除备忘
			isShowDeleteNote(item,index) {
				uni.showModal({
					content: "你确定要删除吗?",
					success: (res) => {
						if (res.confirm) {
							console.log('comfirm') //点击确定之后执行的代码
							console.log(item);
							delete_notes_by_pk(item.id).then(res=>{
								console.log(res,"删除备忘res");
								if(res.data?.delete_notes_by_pk){
									uni.showToast({
										icon: "success",
										title: "删除成功!"
									})
									this.showItemEdit = false
									console.log(res, "修改备忘res");
									this.indexEditContent = {}
									this.list.splice(index,1)
									
									this.$emit("update:list", this.list);
								}else{
									uni.showToast({
										icon: "error",
										title: "删除失败!"
									})
								}
							
							}).catch(err=>{
								console.log(err,"删除备忘err");
								uni.showToast({
									icon: "error",
									title: "删除失败!"
								})
							})
						} else {
							console.log('cancel') //点击取消之后执行的代码
							
						}
					}

				})
			},
			// 编辑提交
			editSubmit(item) {
				let that = this
				console.log(this.indexEditContent);
				if (this.indexEditContent.notes_content.trim() == '') {
					uni.showToast({
						icon: "error",
						title: "不能添加空内容!"
					})
					return
				}
				let variables = {
					"id": this.indexEditContent.id,
					"notes_content": this.indexEditContent.notes_content
				}

				update_notes_by_pk(variables).then(res => {
					if (res.data?.update_notes_by_pk) {
						uni.showToast({
							icon: "success",
							title: "修改成功!"
						})
						this.showItemEdit = false
						console.log(res, "修改备忘res");
						this.indexEditContent = {}
						item = res.data?.update_notes_by_pk
						// this.$emit('list',this.list)

						this.$emit("update:list", this.list);
					} else {
						uni.showToast({
							icon: "error",
							title: "修改失败!"
						})
					}
				}).catch((err => {
					console.log(err, "修改备忘err");
					uni.showToast({
						icon: "error",
						title: "修改失败!"
					})
				}))
			},
			showEdit(item, index) {
				console.log(index);

				this.indexEditContent = item
				this.curentIndex = index
				this.showItemEdit = true
			},
			
			// 订阅
			sbumitBefore(){
				checkAndRequestSubscribeMessage().then(res=>{
					// console.log(res,"-------------checkAndRequestSubscribeMessageres");
					// 只要res == ok 说明已经返回到该页面,继续添加任务
				}).catch(err=>{
					console.log(err,"--------------checkAndRequestSubscribeMessageerr");
				}).finally(e=>{
					// console.log(e,"fanaliy");
					// 说明已经返回到该页面,继续添加任务
					this.submitNote()
				})
			},
			// 添加备忘
			submitNote() {
				console.log(this.notes_content_add, "11");
				if (this.notes_content_add.trim() == '') {
					uni.showToast({
						icon: "error",
						title: "不能添加空内容!"
					})
					return
				}
				let variables = {
					"user_id": this.userInfo.id,
					"notes_content": this.notes_content_add
				}

				InsertNotes(variables).then(res => {
					console.log(res, "添加备忘res");
					if (res.data?.insert_notes) {
						uni.showToast({
							icon: "success",
							title: "添加成功!"
						})
						this.showAdd = false
						console.log(this.list);
						this.notes_content_add = ''
						this.list.unshift(res.data?.insert_notes.returning[0])
						// this.$emit('list',this.list)

						this.$emit("update:list", this.list);
					} else {
						uni.showToast({
							icon: "error",
							title: "添加失败!"
						})
					}
				}).catch((err => {
					console.log(err, "添加备忘err");
					uni.showToast({
						icon: "error",
						title: "添加失败!"
					})
				}))
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wei_container {
		

	}

	.wei_item_add {}

	.wei_item {

		// min-height: 200rpx;
		width: 100%;

	}

	.wei_textarea {

		border-radius: 5rpx;
		// overflow: hidden;
		height: 100%;

	}

	.cu-form-group textarea {
		min-height: 300rpx;
		border: 1px solid lightgrey;
		width: 100%;
		padding: 10rpx;
		border-radius: 5rpx;
	}
</style>
